<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG 描边动画</title>
  </head>
  <body>
    <div id="app">
      <div class="chunk">
        <svg viewBox="0 0 1024 1024">
          <path
            fill="#7178bc"
            stroke="#7178bc"
            d="M853.333333 490.666667a21.333333 21.333333 0 0 1 3.84 42.325333L853.333333 533.333333H170.666667a21.333333 21.333333 0 0 1-3.84-42.325333L170.666667 490.666667h682.666666z"
          ></path>
        </svg>
      </div>
      <div class="chunk">
        <svg viewBox="0 0 1024 1024">
          <path
            fill="#c63030"
            stroke="#ef0404"
            d="M768.426667 255.573333a21.333333 21.333333 0 0 1 2.474666 27.178667l-2.474666 2.986667-226.261334 226.218666 226.261334 226.304a21.333333 21.333333 0 0 1-27.178667 32.64l-2.986667-2.474666L512 542.122667 285.738667 768.426667a21.333333 21.333333 0 0 1-32.64-27.178667l2.474666-2.986667L481.834667 512 255.573333 285.738667a21.333333 21.333333 0 0 1 27.178667-32.64l2.986667 2.474666L512 481.706667l226.261333-226.176a21.333333 21.333333 0 0 1 30.165334 0z"
          ></path>
        </svg>
      </div>
      <div class="chunk">
        <svg viewBox="0 0 1024 1024">
          <path
            fill="#27a92e"
            stroke="#27a92e"
            d="M795.562667 368.896a21.333333 21.333333 0 0 1 32.64 27.221333l-2.432 2.986667-384 384a21.333333 21.333333 0 0 1-27.221334 2.432l-2.986666-2.432-213.333334-213.333333a21.333333 21.333333 0 0 1 27.221334-32.64l2.986666 2.432L426.666667 737.834667l368.896-368.938667z"
          ></path>
        </svg>
      </div>
      <div class="chunk">
        <svg viewBox="0 0 1024 1024">
          <path
            fill="#7178bc"
            stroke="#7178bc"
            d="M512 149.333333a21.333333 21.333333 0 0 1 20.992 17.493334L533.333333 170.666667l-0.042666 319.957333L853.333333 490.666667a21.333333 21.333333 0 0 1 3.84 42.325333L853.333333 533.333333l-320.042666-0.042666L533.333333 853.333333a21.333333 21.333333 0 0 1-42.325333 3.84L490.666667 853.333333l-0.042667-320.042666L170.666667 533.333333a21.333333 21.333333 0 0 1-3.84-42.325333L170.666667 490.666667l319.957333-0.042667L490.666667 170.666667a21.333333 21.333333 0 0 1 21.333333-21.333334z"
          ></path>
        </svg>
      </div>
      <div class="chunk">
        <svg viewBox="0 0 1024 1024">
          <path
            fill="#a7a3a3"
            stroke="#a7a3a3"
            d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 42.666667a384 384 0 1 0 0 768 384 384 0 0 0 0-768z"
          ></path>
          <path
            fill="#a7a3a3"
            stroke="#a7a3a3"
            d="M512 810.666667a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z m7.936-554.666667c-55.296 0-98.304 16.896-129.024 50.688-30.72 32.256-45.312 75.264-45.312 129.024h60.672c0-37.632 8.448-66.816 25.344-88.32 18.432-25.344 46.848-37.632 85.248-37.632 32.256 0 57.6 8.448 75.264 26.88 16.896 16.896 26.112 40.704 26.112 71.424 0 21.504-7.68 41.472-23.04 60.672-4.608 6.144-13.824 15.36-26.112 27.648-41.472 36.864-66.816 66.048-77.568 89.088-9.216 19.2-13.824 41.472-13.824 66.816h61.44c0-20.736 4.608-39.168 14.592-56.064 7.68-13.824 19.2-27.648 36.096-42.24 33.792-29.952 54.528-49.92 62.208-59.136 19.2-25.344 29.184-55.296 29.184-89.856 0-46.08-14.592-82.176-43.008-108.288-29.952-27.648-69.12-40.704-118.272-40.704z m-144 209.92a30.293333 30.293333 0 1 0 0-60.586667 30.293333 30.293333 0 0 0 0 60.586667z m132.522667 217.173333a30.72 30.72 0 1 0 0-61.44 30.72 30.72 0 0 0 0 61.44z"
          ></path>
        </svg>
      </div>
      <div class="chunk">
        <svg viewBox="0 0 1024 1024">
          <path
            fill="#c38b13"
            stroke="#c38b13"
            d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 42.666667a384 384 0 1 0 0 768 384 384 0 0 0 0-768z"
          ></path>
          <path
            fill="#c38b13"
            stroke="#c38b13"
            d="M512 277.333333a56.490667 56.490667 0 0 1 56.064 63.488l-32.085333 256.682667a24.149333 24.149333 0 0 1-47.957334 0l-32.085333-256.682667A56.490667 56.490667 0 0 1 512 277.333333z m0 469.333334a42.666667 42.666667 0 1 0 0-85.333334 42.666667 42.666667 0 0 0 0 85.333334z"
          ></path>
        </svg>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
